import React, {Component} from 'react';
import {
	AppRegistry,
	Dimensions,
	Platform,
	NativeModules,
	DeviceInfo,
	StyleSheet,
	Image,
	Text,
	View,
	TextInput,
	PixelRatio,
	TouchableOpacity,
	ScrollView,
	FlatList,
	ActivityIndicator
} from 'react-native';

var Common = require('./common');
const pixelRatio = PixelRatio.get();
const dismissKeyboard = require('dismissKeyboard');
let page = 1
export default class BrandList extends Component<Props> {
	static navigationOptions = {
		headerTitle: '',
		tabBarLabel: '',

	};

	constructor(props) {
		super(props);
		this.state = {
			str: this.props.navigation.state.params,
			brand: [],
			refreshing: false,//下拉刷新
			hasMore: true,//是否有更多数据
			endText: '加载更多...',
		};
	}

	login() {
		var _this = this;
		Common.ajaxPost(Common.url + 'login.php', function (res) {
			if (res.code == "0000") {

			}
		}.bind(this), {verify: '08login', t: ''});
	}

	toRegister() {
		this.props.navigation.navigate('Register')
	}

	toDetail(id) {
		this.props.navigation.navigate('BrandDetail', id)
	}

	getData(id) {
		console.log('getData', page);
		var _this = this;
		Common.ajaxPost(Common.url + 'car.php?action=carlist&page=' + page + '&pagesize=10&ccid1=' + id, function (res) {
			console.log(res)
			if (res.code == 1) {

				var data = res.data;
				var arr = [];

				if(data.list.length > 0){
					arr = this.state.brand.concat(data.list);
					this.setState({
						hasMore: true,
						refreshing: true,
						brand: arr
					})

				}
				else{
					this.setState({
						hasMore: false,
						refreshing: false
					})
				}
			}
			else {
				this.setState({
					hasMore: false,
					refreshing: false
				})
				console.log('hasMore', this.state.hasMore);
			}
		}.bind(this), {verify: '08login', t: ''});
	}

	renderBrand = (data) => {
		console.log('renderBrand', data);
		var _this = this;
		var bgColor = '#fff';
		if (data != undefined) {
			return (
				<View key={data.item.aid}>
					<TouchableOpacity style={styles.subItem} onPress={_this.toDetail.bind(_this, data.item.aid)}>
						<Text style={styles.txt}>{data.item.subject}</Text>
						<Image style={{width:22,height:22,}} source={require('./images/jiantou.png')} />
					</TouchableOpacity>
				</View>
			);
		}
	}

	keyExtractor = (item, index) => item.aid;//生成key
	refresh() {
		console.log('refresh');
		this.setState({
			refreshing: true,
			hasMore: true,
			brand: []
		})
		page = 1;
		this.getData(this.state.str);
	}

	loadMore() {
		console.log('loadMore');
		page++;
		console.log('page', page);

		console.log('hasMore', this.state.hasMore);
		if (this.state.hasMore) {
			this.getData(this.state.str);
		}
		else{
			this.setState({
				endText: '无更多数据'
			})
		}
	}

	renderFooter() {
		console.log('renderFooter');
		if(this.state.refreshing){
			return (
				<View style={{padding: 20}}>
					<ActivityIndicator/>
					<Text style={{textAlign: 'center'}}>{this.state.endText}</Text>
				</View>
			)
		}
		else{
			return (
				<View></View>
			)
		}
	}


	componentDidMount() {
		console.log('componentDidMount');
		page = 1;
		this.getData(this.state.str)
		// console.log(this.props.navigation.state.params)
		// if(this.props.navigation.state.params.from){
		//   this.setState({
		//     from:this.props.navigation.state.params,
		//   })
		// }
	}

	render() {
		const {navigate} = this.props.navigation;
		return (
			<ScrollView style={styles.container}>
				{this.state.brand.length ? (
					<FlatList
						ListFooterComponent={this.renderFooter.bind(this)}
						renderItem={this.renderBrand}
						data={this.state.brand}
						onEndReachedThreshold={0.2}
						onEndReached={this.loadMore.bind(this)}
						onRefresh={this.refresh.bind(this)}
						refreshing={this.state.refreshing}
						keyExtractor={this.keyExtractor.bind(this)}
					/>
				) : (
					<View
						style={{alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff', marginTop: 5}}>
						<Text style={[{
							padding: 20,
							width: Common.screenWidth,
							textAlign: 'center',
							fontSize: 16,
							color: '#333'
						}]}>无数据</Text>
					</View>
				)}
			</ScrollView>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		height: Common.screenHeight,
		backgroundColor: '#fff',
	},
	brand: {
		backgroundColor: '#f5f5f5',
		color: '#333',
		fontSize: 16,
		paddingLeft: 20,
		paddingTop: 5,
		paddingBottom: 5,
	},
	subItem: {
		height: 36,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		borderBottomColor: '#e9e9e9',
		borderBottomWidth: 1,
		paddingLeft: 20,
		paddingRight: 20,
	},
	txt: {
		fontSize: 14,
		color: 'rgb(72,72,72)'
	}

});
